<template>
    <div class="mt-14">
        <h2 class="flex justify-center items-center mb-7 text-gray-500">全部评论<span>({{ total }})</span></h2>
        <!-- 卡片 -->
        <div :class="props.customeCss">
            <!-- 评论发布表单 -->
            <form>
                <div class="flex gap-3">
                    <!-- 头像 -->
                    <div>
                        <img v-if="commentStore.userInfo.avatar && commentStore.userInfo.avatar.length > 0"
                            :src="commentStore.userInfo.avatar" class="w-10 h-10 rounded-full">
                        <svg v-else class="w-10 h-10 text-gray-400 dark:text-gray-400" aria-hidden="true"
                            xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                            <path
                                d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                        </svg>
                    </div>
                    <!-- 昵称、邮箱、网址、评论内容 -->
                    <div class="grow">
                        <div class="flex items-center gap-5 flex-row">
                            <div class="flex basis-1/3">
                                <span
                                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                    昵称
                                </span>
                                <input @blur="onNicknameInputBlur" v-model="commentStore.userInfo.nickname"
                                    data-tooltip-target="nickname-tooltip-click" data-tooltip-trigger="click"
                                    type="text" id="website-admin"
                                    class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                    placeholder="必填">
                                <!-- 昵称 Tooltip -->
                                <div id="nickname-tooltip-click" role="tooltip"
                                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                    输入 QQ 号会自动获取昵称和头像
                                    <div class="tooltip-arrow" data-popper-arrow></div>
                                </div>
                            </div>
                            <div class="flex basis-1/3">
                                <span
                                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                    邮箱
                                </span>
                                <input v-model="commentStore.userInfo.mail" data-tooltip-target="mail-tooltip-click"
                                    data-tooltip-trigger="click" type="text" id="website-admin"
                                    class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                    placeholder="必填">
                                <!-- 邮箱 Tooltip -->
                                <div id="mail-tooltip-click" role="tooltip"
                                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                    收到回复将会发送到您的邮箱
                                    <div class="tooltip-arrow" data-popper-arrow></div>
                                </div>
                            </div>
                            <div class="flex basis-1/3">
                                <span
                                    class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                    网址
                                </span>
                                <input v-model="commentStore.userInfo.website"
                                    data-tooltip-target="website-tooltip-click" data-tooltip-trigger="click" type="text"
                                    id="website-admin"
                                    class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                    placeholder="选填">
                                <!-- 网址 Tooltip -->
                                <div id="website-tooltip-click" role="tooltip"
                                    class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                    可通过点击头像访问你的网站 (非必填)
                                    <div class="tooltip-arrow" data-popper-arrow></div>
                                </div>

                            </div>
                        </div>
                        <div
                            class="w-full mb-4 mt-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
                            <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
                                <label for="comment" class="sr-only">Your comment</label>
                                <textarea id="comment" rows="4" v-model="commentForm.content"
                                    class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
                                    placeholder="发表一个友善的评论吧..." required></textarea>
                            </div>
                            <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
                                <div @click="onPublishCommentClick"
                                    class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-sky-600 rounded-lg focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-900 hover:bg-sky-700">
                                    发送
                                </div>
                                <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                                    <!-- Emoji -->
                                    <div data-popover-target="popover-emoji" type="button"
                                        class="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                                        <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                            fill="none" viewBox="0 0 24 24">
                                            <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"
                                                stroke-width="2"
                                                d="M15 9h0M9 9h0m12 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM7 13c0 1 .5 2.4 1.5 3.2a5.5 5.5 0 0 0 7 0c1-.8 1.5-2.2 1.5-3.2 0 0-2 1-5 1s-5-1-5-1Z" />
                                        </svg>
                                    </div>

                                    <!-- Emoji Popover -->
                                    <div data-popover id="popover-emoji" role="tooltip"
                                        class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                        <div class="p-2">
                                            <div class="grid grid-cols-6 gap-2">
                                                <div v-for="(emoji, index) in emojis" :key="index"
                                                    class="text-2xl hover:cursor-pointer" @click="addEmoji(emoji)">
                                                    {{ emoji }}
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </form>

            <!-- 评论列表 -->
            <div v-if="comments && comments.length > 0" v-for="(comment, index) in comments" :key="index">

                <!-- 边界线 -->
                <div v-if="index > 0" class="border-t ml-12 mt-5  border-gray-100 dark:border-gray-700"></div>

                <!-- 一级评论 -->
                <div class="flex gap-3 mt-5">
                    <!-- 左边头像栏 -->
                    <div>
                        <a v-if="comment.website && comment.website.length > 0" @click="jumpToWebsite(comment.website)"
                            class="cursor-pointer">
                            <img v-if="comment.avatar && comment.avatar.length > 0" :src="comment.avatar"
                                class="w-10 h-10 rounded-full">
                            <svg v-else class="w-10 h-10 text-gray-400 rounded-full dark:text-gray-400"
                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path
                                    d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                            </svg>
                        </a>
                        <div v-else>
                            <img v-if="comment.avatar && comment.avatar.length > 0" :src="comment.avatar"
                                class="w-10 h-10 rounded-full">
                            <svg v-else class="w-10 h-10 text-gray-400 rounded-full dark:text-gray-400"
                                aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                viewBox="0 0 20 20">
                                <path
                                    d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                            </svg>
                        </div>
                    </div>
                    <!-- 右边评论信息 -->
                    <div class="flex flex-col gap-2 grow">
                        <!-- 昵称 -->
                        <div class="text-xs text-[#FB7299] font-bold">{{ comment.nickname }}</div>
                        <!-- 评论内容 -->
                        <div class="text-sm dark:text-gray-400">{{ comment.content }}</div>
                        <!-- Meta 信息 -->
                        <div class="flex items-center text-xs text-gray-400">
                            <!-- 发布时间 -->
                            <div>{{ comment.createTime }}</div>
                            <div class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600"
                                @click="showReplyForm(index, comment.nickname, comment.id, comment.id)">
                                回复
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 二级评论 -->
                <div class="ml-12" v-if="comment.childComments && comment.childComments.length > 0">
                    <div v-for="(childComment, index2) in comment.childComments" :key="index2">
                        <!-- 头像、昵称、评论内容 -->
                        <div class="flex items-center gap-3 mt-5">
                            <!-- 左边头像栏 -->
                            <div>
                                <a v-if="childComment.website && childComment.website.length > 0"
                                    @click="jumpToWebsite(childComment.website)" class="cursor-pointer">
                                    <img v-if="childComment.avatar && childComment.avatar.length > 0"
                                        :src="childComment.avatar" class="w-6 h-6 rounded-full">
                                    <svg v-else class="w-6 h-6 text-gray-400 rounded-full dark:text-gray-400"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                                    </svg>
                                </a>
                                <div v-else>
                                    <img v-if="childComment.avatar && childComment.avatar.length > 0"
                                        :src="childComment.avatar" class="w-6 h-6 rounded-full">
                                    <svg v-else class="w-6 h-6 text-gray-400 rounded-full dark:text-gray-400"
                                        aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor"
                                        viewBox="0 0 20 20">
                                        <path
                                            d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                                    </svg>
                                </div>
                            </div>
                            <!-- 昵称 -->
                            <div class="text-xs text-[#FB7299] font-bold">
                                {{ childComment.nickname }}
                                <!-- 【回复 @xxx】 -->
                                <span v-if="childComment.replyNickname" class="text-gray-400 font-normal ml-1 mr-1">回复
                                    <span class="text-sky-600 font-normal text-sm">@{{ childComment.replyNickname
                                        }}</span>
                                    <span class="text-gray-400"> :</span>
                                </span>
                            </div>
                            <!-- 评论内容 -->
                            <div class="text-sm dark:text-gray-400">{{ childComment.content }}</div>
                        </div>
                        <!-- Meta 信息 -->
                        <div class="ml-9 mt-1 flex items-center text-xs text-gray-400">
                            <!-- 发布时间 -->
                            <div>{{ childComment.createTime }}</div>
                            <div class="text-gray-400 cursor-pointer ml-4 hover:text-sky-600"
                                @click="showReplyForm(index, childComment.nickname, childComment.id, comment.id)">
                                回复
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 二级评论回复表单 -->
                <form class="ml-12 mt-5" v-if="comment.isShowReplyForm">
                    <div class="flex gap-3">
                        <!-- 头像 -->
                        <div>
                            <img v-if="commentStore.userInfo.avatar && commentStore.userInfo.avatar.length > 0"
                                :src="commentStore.userInfo.avatar" class="w-10 h-10 rounded-full">
                            <svg v-else class="w-10 h-10 text-gray-400 dark:text-gray-400" aria-hidden="true"
                                xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
                                <path
                                    d="M10 0a10 10 0 1 0 10 10A10.011 10.011 0 0 0 10 0Zm0 5a3 3 0 1 1 0 6 3 3 0 0 1 0-6Zm0 13a8.949 8.949 0 0 1-4.951-1.488A3.987 3.987 0 0 1 9 13h2a3.987 3.987 0 0 1 3.951 3.512A8.949 8.949 0 0 1 10 18Z" />
                            </svg>
                        </div>
                        <!-- 昵称、邮箱、网址、评论内容 -->
                        <div class="grow">
                            <div class="flex items-center gap-5 flex-row">
                                <div class="flex basis-1/3">
                                    <span
                                        class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        昵称
                                    </span>
                                    <input @blur="onNicknameInputBlur" v-model="commentStore.userInfo.nickname"
                                        data-tooltip-target="nickname-tooltip-click2" data-tooltip-trigger="click"
                                        type="text" id="website-admin"
                                        class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                        placeholder="必填">
                                    <!-- 昵称 Tooltip -->
                                    <div id="nickname-tooltip-click2" role="tooltip"
                                        class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                        输入 QQ 号会自动获取昵称和头像
                                        <div class="tooltip-arrow" data-popper-arrow></div>
                                    </div>
                                </div>
                                <div class="flex basis-1/3">
                                    <span
                                        class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        邮箱
                                    </span>
                                    <input v-model="commentStore.userInfo.mail"
                                        data-tooltip-target="mail-tooltip-click2" data-tooltip-trigger="click"
                                        type="text" id="website-admin"
                                        class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                        placeholder="必填">
                                    <!-- 邮箱 Tooltip -->
                                    <div id="mail-tooltip-click2" role="tooltip"
                                        class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                        收到回复将会发送到您的邮箱
                                        <div class="tooltip-arrow" data-popper-arrow></div>
                                    </div>
                                </div>
                                <div class="flex basis-1/3">
                                    <span
                                        class="inline-flex border-e-0 items-center px-3 text-xs text-gray-900 bg-gray-100 border rounded-e-0 border-gray-300 rounded-s-md dark:bg-gray-600 dark:text-gray-400 dark:border-gray-600">
                                        网址
                                    </span>
                                    <input v-model="commentStore.userInfo.website"
                                        data-tooltip-target="website-tooltip-click2" data-tooltip-trigger="click"
                                        type="text" id="website-admin"
                                        class="rounded-none rounded-e-lg  border text-gray-900 focus:ring-sky-500 focus:border-sky-500 block flex-1 min-w-0 w-full text-xs border-gray-300 p-2.5  dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-sky-500 dark:focus:border-sky-500"
                                        placeholder="选填">
                                    <!-- 网址 Tooltip -->
                                    <div id="website-tooltip-click2" role="tooltip"
                                        class="absolute z-10 invisible inline-block px-3 py-2 text-xs font-medium text-white bg-gray-900 rounded-md shadow-sm opacity-0 tooltip dark:bg-gray-700">
                                        可通过点击头像访问你的网站 (非必填)
                                        <div class="tooltip-arrow" data-popper-arrow></div>
                                    </div>

                                </div>
                            </div>
                            <div
                                class="w-full mb-4 mt-4 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-700 dark:border-gray-600">
                                <div class="px-4 py-2 bg-white rounded-t-lg dark:bg-gray-800">
                                    <label for="comment" class="sr-only">Your comment</label>
                                    <textarea id="comment" rows="4" v-model="replyContent"
                                        class="w-full px-0 text-sm text-gray-900 bg-white border-0 dark:bg-gray-800 focus:ring-0 dark:text-white dark:placeholder-gray-400"
                                        :placeholder="replyPlaceholderText" required></textarea>
                                </div>
                                <div class="flex items-center justify-between px-3 py-2 border-t dark:border-gray-600">
                                    <div @click="onReplyContentSubmit"
                                        class="inline-flex items-center py-2.5 px-4 text-xs font-medium text-center text-white bg-sky-600 rounded-lg focus:ring-4 focus:ring-sky-200 dark:focus:ring-sky-900 hover:bg-sky-700">
                                        发送
                                    </div>
                                    <div class="flex ps-0 space-x-1 rtl:space-x-reverse sm:ps-2">
                                        <!-- Emoji -->
                                        <div data-popover-target="popover-emoji2" type="button"
                                            class="inline-flex justify-center items-center p-2 text-gray-500 rounded cursor-pointer hover:text-gray-900 hover:bg-gray-100 dark:text-gray-400 dark:hover:text-white dark:hover:bg-gray-600">
                                            <svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg"
                                                fill="none" viewBox="0 0 24 24">
                                                <path stroke="currentColor" stroke-linecap="round"
                                                    stroke-linejoin="round" stroke-width="2"
                                                    d="M15 9h0M9 9h0m12 3a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM7 13c0 1 .5 2.4 1.5 3.2a5.5 5.5 0 0 0 7 0c1-.8 1.5-2.2 1.5-3.2 0 0-2 1-5 1s-5-1-5-1Z" />
                                            </svg>
                                        </div>

                                        <!-- Emoji Popover -->
                                        <div data-popover id="popover-emoji2" role="tooltip"
                                            class="absolute z-10 invisible inline-block w-64 text-sm text-gray-500 transition-opacity duration-300 bg-white border border-gray-200 rounded-lg shadow-sm opacity-0 dark:text-gray-400 dark:border-gray-600 dark:bg-gray-800">
                                            <div class="p-2">
                                                <div class="grid grid-cols-6 gap-2">
                                                    <div v-for="(emoji, index) in emojis" :key="index"
                                                        class="text-2xl hover:cursor-pointer"
                                                        @click="addReplyEmoji(emoji)">
                                                        {{ emoji }}
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>


            </div>
            <!-- 没有评论的提示文字 -->
            <div v-else class="flex items-center mt-10 mb-10 justify-center text-gray-400">还没有任何评论哟~</div>
        </div>
    </div>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import { initTooltips, initPopovers } from 'flowbite'
import { useCommentStore } from '@/stores/comment'
import { getUserInfoByQQ, publishComment, getComments } from '@/api/frontend/comment'
import { useRoute } from 'vue-router'
import { showMessage } from '@/composables/util'

const route = useRoute()
const commentStore = useCommentStore()

// 对外暴露属性
const props = defineProps({
    customeCss: {
        type: String,
        default: 'w-full px-5 py-10 mb-3 bg-white border border-gray-200 rounded-lg dark:bg-gray-800 dark:border-gray-700'
    }
})

onMounted(() => {
    initTooltips()
    initPopovers()
})

// emojis 表情符号
const emojis = ref(['😃', '😁', '😅', '😂', '😍', '😜', '😝', '🤑', '🥵', '🥰', '😙', '😎'
    , '😵', '😭', '😱', '😖', '🥳', '👽', '🙈', '🤡', '😤', '💣', '💯', '💢', '❤️', '👍', '👏', '👋', '👌', '🤏', '🙏'])

// 评论表单
const commentForm = reactive({
    avatar: '',
    content: '',
    mail: '',
    nickname: '',
    routerUrl: route.path,
    website: '',
    replyCommentId: null,
    parentCommentId: null
})

// 初始化 commentForm 表单对象中的用户信息
function initFormCommentUserInfo() {
    commentForm.avatar = commentStore.userInfo.avatar
    commentForm.mail = commentStore.userInfo.mail
    commentForm.nickname = commentStore.userInfo.nickname
    commentForm.website = commentStore.userInfo.website
}
initFormCommentUserInfo()

// 邮箱正则
const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
// 一级评论发布点击事件
const onPublishCommentClick = () => {
    initFormCommentUserInfo()
    // 校验
    if (commentForm.nickname.length === 0) {
        showMessage('请填写 QQ 号或昵称', 'warning')
        return
    }
    if (commentForm.mail.length === 0 || !emailRegex.test(commentForm.mail)) {
        showMessage('邮箱格式不正确', 'warning')
        return
    }
    if (commentForm.content.length === 0) {
        showMessage('请填写评论内容', 'warning')
        return
    }

    publishComment(commentForm).then(res => {
        if (!res.success) {
            // 获取服务端返回的错误消息
            let message = res.message
            // 提示错误消息
            showMessage(message, 'error')
            return
        }

        showMessage('评论发布成功')
        // 将表单对象中的 content 评论内容置空
        commentForm.content = ''
        // 重新渲染表单列表
        initComments()
    })
}

// 添加 Emoji 表情
const addEmoji = (emoji) => {
    commentForm.content = commentForm.content + emoji
}

// 昵称输入框 blur 事件
const onNicknameInputBlur = () => {
    let nickname = commentStore.userInfo.nickname
    // 校验昵称是否是纯数字
    if (!checkIfPureNumber(nickname)) {
        return
    }

    // 若是，请求后端接口，根据 QQ 号获取用户信息
    getUserInfoByQQ(nickname).then(res => {
        if (!res.success) {
            // 提示错误消息
            showMessage('获取 QQ 信息失败', 'error')
            return
        }

        commentStore.userInfo.avatar = res.data.avatar
        commentStore.userInfo.nickname = res.data.nickname
        commentStore.userInfo.mail = res.data.mail
    })
}

// QQ 号校验，是否是纯数字 
function checkIfPureNumber(text) {
    const trimmedValue = text.trim();
    return /^\d+$/.test(trimmedValue);
}

// 评论数组
const comments = ref([])
// 评论总数量
const total = ref(0)

function initComments() {
    // 获取当前路由下的所有评论
    getComments(route.path).then(res => {
        if (res.success) {
            total.value = res.data.total
            comments.value = res.data.comments
        }
    })
}
initComments()

// 回复 textarea 的 placeholder 提示文字
const replyPlaceholderText = ref('发表一个友善的评论吧...')
// 回复的评论
const replyContent = ref('')

// 当前回复的评论 ID
const currReplyCommentId = ref(null)
// 当前回复的父级 ID
const currParentCommentId = ref(null)

// 展示回复表单
const showReplyForm = (index, nickname, replyCommentId, parentCommentId) => {
    currReplyCommentId.value = replyCommentId
    currParentCommentId.value = parentCommentId
    // 先将评论数组中一级评论的所有 isShowReplyForm 字段设置为 false
    comments.value.forEach(comment => comment.isShowReplyForm = false)
    // 拿到当前下标的评论
    let comment = comments.value[index]
    // isShowReplyForm 置为 true
    comment.isShowReplyForm = true
    // 动态设置评论回复表单中的 textarea 的 placeholder 提示文字
    replyPlaceholderText.value = '回复 @' + nickname + ':'

    nextTick(() => {
        initPopovers(),
            initTooltips()
    })
}

// 评论回复表单：添加 Emoji
const addReplyEmoji = (emoji) => {
    replyContent.value = replyContent.value + emoji
}

// 评论回复发送事件
const onReplyContentSubmit = () => {
    initFormCommentUserInfo()
    // 校验
    if (commentForm.nickname.length === 0) {
        showMessage('请填写 QQ 号或昵称', 'warning')
        return
    }
    if (commentForm.mail.length === 0 || !emailRegex.test(commentForm.mail)) {
        showMessage('邮箱格式不正确', 'warning')
        return
    }
    if (replyContent.value.length === 0) {
        showMessage('请填写回复内容', 'warning')
        return
    }
    // 评论回复内容
    commentForm.content = replyContent.value
    commentForm.replyCommentId = currReplyCommentId.value
    commentForm.parentCommentId = currParentCommentId.value

    // 请求接口
    publishComment(commentForm).then(res => {
        if (!res.success) {
            // 获取服务端返回的错误消息
            let message = res.message
            // 提示错误消息
            showMessage(message, 'error')
            return
        }

        showMessage('回复评论成功')
        // 将评论回复的内容置空
        replyContent.value = ''
        commentForm.content = ''
        // 重新渲染评论列表
        initComments()
    })
}

// 跳转评论用户网址
const jumpToWebsite = (url) => {
    // 在新窗口访问新的链接地址
    window.open(url.startsWith('http') ? url : 'http://' + url, '_blank');
}

</script>